import React from 'react'
import {StyleSheet, View, Text, PixelRatio} from 'react-native'
import theme from '../../config/theme'

const hotData = [
    '#活着',
    '恶之花',
    '虽然是精神病但没关系',
    '便利店新星',
    '暑假',
    'The King：永远的君主',
    '优雅的朋友们',
    '金秀贤',
    '带轮子的家',
    '我们，爱过吗',
    '李食堂',
    '三时三餐'
]

function HotList() {
    return (
        <View style={styles.content}>
            <View style={{paddingHorizontal: 10, marginBottom: 5}}>
                <Text>热门搜索</Text>
            </View>
            <View style={styles.allHot}>
                {
                    hotData.map((item, index) => {
                        return (
                            <View key={index} style={styles.hot}>
                                <Text>{item}</Text>
                            </View>
                        )
                    })
                }
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    content: {
        paddingVertical: 15,
    },
    allHot: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
        paddingLeft: 5
    },
    hot: {
        alignSelf: "flex-start",
        borderColor: theme.borderColor,
        borderStyle: "solid",
        borderRadius: 4,
        borderWidth: 1 / PixelRatio.get(),
        paddingHorizontal: 5,
        paddingVertical: 5,
        marginHorizontal: 5,
        marginVertical: 5
    }
})

export default HotList
